<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
  <link rel="stylesheet" href="../css/payMassage.css">
</head>
<style>

</style>

<body>
  <!-- 订单填写界面 -->
  <!-- 项部导航 -->
  <div class="xtx_topnav">
    <div class="wrapper">
      <!-- 顶部导航 -->
      <ul class="xtx_navs">
        <li id="login">
          <!-- 有用户名数据 -->
          <!-- <a href="javascript:;"><i class="iconfont icon-user">用户名</i></a> -->
          <!-- 没有用户名数据 -->
          <a href="./login.html">请先登录</a>
        </li>
        <li id="register">
          <!-- 有用户名数据 -->
          <!-- <a href="javascript:;">退出登录</a> -->
          <!-- 没有用户名数据 -->
          <a href="./register.html">免费注册</a>
        </li>
        <li>
          <a href="./center-order.html">我的订单</a>
        </li>
        <li>
          <a href="./center.html">会员中心</a>
        </li>
        <li>
          <a href="javascript:;">帮助中心</a>
        </li>
        <li>
          <a href="javascript:;">在线客服</a>
        </li>
        <li>
          <a href="javascript:;">
            <i class="mobile sprites"></i>
            手机版
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!-- 头部 -->
  <div class="xtx_header">
    <div class="wrapper">
      <!-- 网站Logo -->
      <h1 class="xtx_logo"></h1>
      <!-- 主导航 -->
      <div class="xtx_navs">
        <ul class="clearfix">
          <li>
            <a href="../html/header.html">首页</a>
          </li>
          <li>
            <a href="./category01.html">生鲜</a>
          </li>
          <li>
            <a href="./category01.html">美食</a>
          </li>
          <li>
            <a href="./category01.html">餐厨</a>
          </li>
          <li>
            <a href="./category01.html">电器</a>
          </li>
          <li>
            <a href="./category01.html">居家</a>
          </li>
          <li>
            <a href="./category01.html">洗护</a>
          </li>
          <li>
            <a href="./category01.html">孕婴</a>
          </li>
          <li>
            <a href="./category01.html">服装</a>
          </li>
        </ul>
      </div>
      <!-- 站内搜索 -->
      <div class="xtx_search clearfix">
        <!-- 购物车 -->

        <a href="" class="xtx_search_cart sprites">
          <!--  -->
          <i>2</i>
        </a>
        <!-- 搜索框 -->
        <div class="xtx_search_wrapper">
          <input type="text" placeholder="搜一搜" onclick="location.href='./search.html'">
        </div>
      </div>
    </div>
  </div>
  <!-- 购物车订单填写模块 -->
  <div class="payIng">
    <div class="goodsInfo ">
      <div class="location ">
        <a href="../html/header.html">首页</a> <i>></i> <a href="">购物车</a> <i>> </i> <i>填写订单</i>
      </div>
      <div class="info-Message">
        <!-- 所在位置 -->
        <!-- 1.地址展示及相关操作 -->
        <div class="goodsaAd">
          <!-- 收货地址 -->
          <h3>收货地址</h3>
          <!-- 切换地址界面 -->
          <div class="shade">
            <div class="cut">
              <div class="header">
                <h3>切换收货地址</h3>
                <a href="">x</a>
              </div>
              <div class="body">
                <div class="ad">
                  <ul>
                    <li> <span>收<i></i>货<i></i>人：</span></li>
                    <li> <span>联系方式：</span></li>
                    <li> <span>收货地址：</span></li>
                  </ul>
                </div>

              </div>
              <div class="footer">
                <button>取消</button>
                <button>确认</button>
              </div>
            </div>
            <div class="increase">
              <div class="header">
                <h3>添加收货地址</h3>
                <a href="">x</a>
              </div>
              <div class="body">
                <section>
                  <div class="form">
                    <div class="left">
                      <div class="mg">收货人：</div>
                      <div><input class="input" type="" placeholder="请输入内容"></div>
                    </div>
                    <div class="left">
                      <div class="mg">手机号：</div>
                      <div><input class="input" type="" placeholder="请输入内容"></div>
                    </div>
                    <div class="left">
                      <div class="mg">地区：</div>
                      <div><input class="input" type="" placeholder="请输入内容"></div>
                    </div>
                    <div class="left">
                      <div class="mg">详细地址：</div>
                      <div><input class="input" type="" placeholder="请输入内容"></div>
                    </div>
                    <div class="left">
                      <div class="mg">邮政编码：</div>
                      <div><input class="input" type="" placeholder="请输入内容"></div>
                    </div>
                    <div class="left">
                      <div class="mg">地址标签：</div>
                      <div><input class="input" type="" placeholder="请输入内容"></div>
                    </div>
                  </div>
                </section>
              </div>
              <div class="footer">
                <button>取消</button>
                <button>确认</button>
              </div>
            </div>
            <div class="alter">
              <div class="header">
                <h3>切换收货地址</h3>
                <a href="">x</a>
              </div>
              <div class="body">
                <section>
                  <div class="form">
                    <div class="left">
                      <div class="mg">收货人：</div>
                      <div><input class="input" type="" placeholder="请输入内容"></div>
                    </div>
                    <div class="left">
                      <div class="mg">手机号：</div>
                      <div><input class="input" type="" placeholder="请输入内容"></div>
                    </div>
                    <div class="left">
                      <div class="mg">地区：</div>
                      <div><input class="input" type="" placeholder="请输入内容"></div>
                    </div>
                    <div class="left">
                      <div class="mg">详细地址：</div>
                      <div><input class="input" type="" placeholder="请输入内容"></div>
                    </div>
                    <div class="left">
                      <div class="mg">邮政编码：</div>
                      <div><input class="input" type="" placeholder="请输入内容"></div>
                    </div>
                    <div class="left">
                      <div class="mg">地址标签：</div>
                      <div><input class="input" type="" placeholder="请输入内容"></div>
                    </div>
                  </div>
                </section>
              </div>
              <div class="footer">
                <button>取消</button>
                <button>确认</button>
              </div>
            </div>
          </div>
          <div class="Ad">
            <div class="getAdd">
              <!-- 如果没有地址,提示需要输入地址，有地址时显示默认地址 -->
              <span>您需要先添加收货地址才可提交订单</span>
              <!-- <div class="ad">
                <ul>
                  <li>收货人：<i>jsanjdsjndjs</i></li>
                  <li>练习方式：<i>bxbxbxvbx</i></li>
                  <li>收货地址：<i>bxbxcbxbv</i></li>
                </ul>
              </div> -->
              <!-- 操作按钮 -->
              <div class="Addbutton">
                <a href="">切换地址</a>
                <button class="b2">添加地址</button>
                <button class="b3">修改地址</button>
              </div>
            </div>

          </div>
        </div>
        <!-- 2.选购的商品信息展示 -->
        <div class="payingMessage">
          <h3>商品信息</h3>
          <table>
            <thead class="pm">
              <tr>
                <th>商品信息</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>实付</th>
              </tr>
            </thead>
            <tbody id="numBer">
              <tr>
                <td></td>
                <td>￥<span>12</span></td>
                <td>1</td>
                <td>￥<span>12</span></td>
                <td>￥<span>12</span></td>
              </tr>
            </tbody>

          </table>
          <h3>配送时间</h3>
          <div class="sendTime">
            <a href="">不限送货时间：周一至周日</a>
            <a href="">工作日送货：周一至周五</a>
            <a href="">双休日、假日送货：周六至周日</a>
          </div>
          <h3>支付方式</h3>
          <div class="payMent">
            <a href="">在线支付</a>
            <a href="">货到付款</a>
            <span>货到付款需付5元手续费</span>
          </div>
          <h3>金额明细</h3>
          <div class="totallAmount">
            <ul>
              <li>
                <span>商品件数：</span>
                <i>1件</i>
              </li>
              <li>
                <span>商品总价：</span>
                <i>￥19.9</i>
              </li>
              <li>
                <span>运费：</span><i>￥1</i>
              </li>
              <li>
                <span>应付总额：</span><i>￥19.9</i>
              </li>
            </ul>
          </div>
        </div>
        <div class="payBtn">
          <a href="./paypage.html">
            <button>提交订单</button>
          </a>
        </div>
      </div>
    </div>
  </div>
  <!-- 公共底部 -->
  <div class="xtx_footer clearfix" src="icon-kefu">
    <div class="wrapper">
      <!-- 联系我们 -->
      <div class="contact clearfix">
        <dl>
          <dt>客户服务</dt>
          <dd class="chat">在线客服</dd>
          <dd class="feedback">问题反馈</dd>
        </dl>
        <dl>
          <dt>关注我们</dt>
          <dd class="weixin">公众号</dd>
          <dd class="weibo">微博</dd>
        </dl>
        <dl>
          <dt>下载APP</dt>
          <dd class="qrcode">
            <img src="http://erabbit.itheima.net/img/qrcode.5372a064.jpg">
          </dd>
          <dd class="download">
            <span>扫描二维码</span>
            <span>立马下载APP</span>
            <a href="javascript:;">下载页面</a>
          </dd>
        </dl>
        <dl>
          <dt>服务热线</dt>
          <dd class="hotline">
            400-0000-000
            <small>周一至周日 8:00-18:00</small>
          </dd>
        </dl>
      </div>
    </div>
    <!-- 其它 -->
    <div class="extra">
      <div class="wrapper">
        <!-- 口号 -->
        <div class="slogan">
          <a href="javascript:;" class="price">价格亲民</a>
          <a href="javascript:;" class="express">物流快捷</a>
          <a href="javascript:;" class="quality">品质新鲜</a>
        </div>
        <!-- 版权信息 -->
        <div class="copyright">
          <p>
            <a href="javascript:;">关于我们</a>
            <a href="javascript:;">帮助中心</a>
            <a href="javascript:;">售后服务</a>
            <a href="javascript:;">配送与验收</a>
            <a href="javascript:;">商务合作</a>
            <a href="javascript:;">搜索推荐</a>
            <a href="javascript:;">友情链接</a>
          </p>
          <p>CopyRight &copy; 小兔鲜儿</p>
        </div>
      </div>
    </div>
  </div>

  <script src="../js/goodsPay.js"></script>
  <script>

    const gpbtn = document.querySelector('.Addbutton')
    gpbtn.addEventListener('click', function (e) {
      if (e === 'A') {
        Document.querySelector('')

      }

    })
  </script>
</body>

</html>